<!-- 合规案例-列表 -->
<template>
  <div class="list-body">
    <van-search class="search" show-action v-model="keyword" shape="round" placeholder="请输入违规事项或违规内容关键字">
      <template #action>
        <div class="cus-action">
          <span @click="handleFilter" :style="coulist.length > 0 ? 'color:#3975C6;' : 'color:#666666;'">
            {{ coulist.length > 0 ? `已选${coulist.length}` : '筛选' }}
          </span>
          <van-icon :name="showFilterPop ? 'arrow-up' : 'arrow-down'"
            :class="coulist.length > 0 ? 'cus-icon icon-col' : 'cus-icon'" />
        </div>
      </template>
    </van-search>
    <!-- <van-loading size="24px" style="position: relative;top: 3%;" v-if="listLoading" vertical>
      加载中...v-else
    </van-loading> -->
    <div class="tabs-list">
      <van-list v-if="caseList.length > 0" v-model="listLoading" :finished="finished"
        :finished-text="this.searchQry.pagenum > 1 ? '到底了' : ''" @load="onLoad">
        <div class="item" v-for="item in caseList" :key="item.id" @click="openDetail(item)">
          <div class="item-info">
            <div class="info-name">{{ item.METHOD || '-' }}({{ item.YEAR }}年)</div>
          </div>
          <div class="info-con">
            <p class="row"><span class="row-tit">违规事项</span><span class="con-col">{{ item.PROBLEM || '-' }}</span></p>
            <p class="row"><span class="row-tit">违规内容</span><span class="con-col">{{ item.DESCRIPTION || '-' }}</span>
            </p>
          </div>
        </div>
      </van-list>
      <van-empty v-else description="暂无数据" />
    </div>
    <van-popup class="filter-pop" v-model="showFilterPop">
      <CasePop :list="list" @on-emit="getQry"></CasePop>
    </van-popup>
  </div>
</template>

<script>
import { getCaseData } from '@/api/case'
import CasePop from './components/casePop.vue'
export default {
  name: 'CaseCompliant',
  components: { CasePop },
  props: {
    list: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      keyword: "",
      showFilterPop: false,
      listLoading: true,
      finished: false,
      caseList: [],
      searchQry: {
        code: '80306',
        pagenum: 0,
        pagesize: 10,
        // sortdatafield,
        // sortorder,
      },
      qrydata: {
        NUM_STYPE: 1, // 固定值
        VAR_TYPE: '', // 发现方式
        NUM_YEAR: '', // 发现年度
        VAR_PROBLEMDESC: '', //违规事项	关键字 ？？？待测试使用
        // VAR_PROBLEM: '', //违规事项	关键字
        // VAR_DESCRIPTION: '', // 案例描述
        // VAR_EMPE:'' // 案例创建人
      },
      timer: null,
      timerCase: null,
      coulist: [],
    }
  },
  watch: {
    keyword(val) {
      if (this.timer) clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.searchQry.pagenum = 0	//起始页（从0开始）	Y	
        this.searchQry.pagesize = 10	//每页条数	Y	
        this.caseList = []
        if (!val) {
          this.listLoading = true
          this.finished = false
          this.qrydata.VAR_PROBLEMDESC = ''
        } else {
          this.qrydata.VAR_PROBLEMDESC = val
        }
        this.getCaseCompliantList()
      }, 1000)
    }
  },
  created() {
    this.caseList = []
    this.getCaseCompliantList()
  },
  mounted() { },
  methods: {
    getQry(objVal) {
      this.searchQry.pagenum = 0	//起始页（从0开始）	Y	
      this.searchQry.pagesize = 10	//每页条数	Y	
      this.listLoading = true
      this.finished = false
      this.showFilterPop = false
      this.caseList = []
      this.qrydata.VAR_TYPE = objVal.type
      this.qrydata.NUM_YEAR = objVal.year
      this.getCaseCompliantList()

      if (objVal.type) {
        this.coulist.push('a')
      }
      if (objVal.year) {
        this.coulist.push('b')
      }
      if (!objVal.type && !objVal.year) {
        this.coulist = []
      }
      this.coulist = Array.from(new Set(this.coulist))
    },
    handleFilter(val) {
      this.showFilterPop = !this.showFilterPop
    },
    onLoad() {
      this.searchQry.pagenum += 1
      this.getCaseCompliantList()
    },
    async getCaseCompliantList() {
      let qry = {
        ...this.searchQry,
        params: JSON.stringify(this.qrydata)
      }
      const resData = await getCaseData(qry)
      this.listLoading = false
      this.caseList = [...this.caseList, ...resData.data.VALUE_LIST]
      if (resData.data.VALUE_LIST.length < this.searchQry.pagesize) {
        this.finished = true
      }
    },

    openDetail(rowdata) {
      this.$router.push({
        path: '/compliantCasedetail',
        query: {
          id: rowdata.ID,
          type: 1, // 合规
          activeType: 'all'
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.list-body {
  height: 100%;

  /deep/ .search {
    height: 112px;

    .van-search__content {
      height: 72px;

      .van-field {
        display: flex;
        align-items: center;
        justify-content: center;

        .van-field__body {
          height: 100%;
        }
      }
    }

    .cus-action {
      display: flex;
      align-items: center;
      justify-content: center;

      .cus-icon {
        width: 28px;
        height: 28px;
        color: #bbb;
        margin-left: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .van-icon:before {
        vertical-align: middle;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .icon-col {
        color: #3975C6;
      }
    }
  }

  .tabs-list {
    height: calc(100% - 236px);
    overflow: auto;

    .item {
      padding: 40px 30px;
      margin-top: 20px;
      background: #fff;

      .item-info {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .info-name {
          font-size: 28px;
          font-weight: 500;
          line-height: 42px;
          color: #333
        }
      }

      .info-con {
        // display: flex;
        // flex-direction: column;
        font-family: SourceHanSansCN, SourceHanSansCN;
        font-weight: 400;
        font-size: 26px;
        color: #5A4F4F;
        padding-top: 20px;

        .row {
          width: 100%;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          // min-height: 56px;
          // line-height: 40px;
          margin-bottom: 30px;

          &:last-child {
            margin-bottom: 0;
          }

          .row-tit {
            width: 132px;
            display: inline-block;
          }

          .con-col {
            width: calc(100% - 148px);
            display: inline-block;
            color: #7F8389;
            // text-align: right;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
        }
      }
    }

    .item:last-child {
      margin-bottom: 20px;
    }
  }

  /deep/ .filter-pop {
    padding: 30px;
    width: 480px;
    max-width: 750px;
    height: calc(100% - 292px);
    bottom: 0;
    top: auto;
    left: auto;
    right: 0;
    min-height: auto;
    transform: none;
  }

  /deep/ .van-overlay {
    bottom: 0;
    top: auto;
    // left: auto;
    // max-width: 750px;
    // width: 100%;
    // z-index: 8888 !important;
    height: calc(100% - 232px);
  }

  // /deep/ .van-popup {
  //   z-index: 9999 !important;
  // }
}

@media (min-width: 751px) {
  /deep/ .filter-pop {
    left: 50% !important;
  }
}
</style>